<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="addEmployeeName" label-width="100px">
        <el-form-item label="姓名:" style="margin-left: -20px">
          <el-input
            v-model="addEmployeeName.empName"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-input
            v-model="addEmployeeName.empJob"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-input
            v-model="addEmployeeName.empType"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训开始时间:">
          <el-date-picker
            v-model="addEmployeeName.empStaTime"
            type="daterange"
            range-separator="至"
            :start-placeholder="startTimeInput"
            :end-placeholder="endTimeInput"
            style="width: 270px; margin-right: 15px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训结束时间:">
          <el-date-picker
            v-model="addEmployeeName.empEndTime"
            type="daterange"
            range-separator="至"
            :start-placeholder="startTimeInput"
            :end-placeholder="endTimeInput"
            style="width: 270px; margin-right: 15px"
          >
          </el-date-picker>
        </el-form-item>
        <div style="width:400px,height:100px">
          <el-form-item style="margin-left: -20px">
            <el-button type="success" @click="selectEmployee">查询</el-button>
            <el-button type="success" @click="add" style="margin-right: 10px"
              >添加</el-button
            >
            <el-upload
              style="display: inline-block"
              action="https://jsonplaceholder.typicode.com/posts/"
              class="upload-demo"
              multiple
              :limit="3"
            >
              <el-button type="primary" style="margin-left: 20px"
                >上传<i class="el-icon-upload el-icon--right"></i
              ></el-button>
            </el-upload>
            <el-button type="primary" style="margin-left: 20px"
              >下载<i class="el-icon-download el-icon--right"></i
            ></el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 展示查询员工的信息 -->
    <TableTemplate
      :header="header"
      :tableData="tableData"
      :title="title"
      @editInfo="editInfo"
      @add="add"
      @deleteEmployee="deleteEmployee"
    />
    <!-- 分页功能 -->
    <Pagination
      :total="total"
      :employee="employee"
      @getCurrentPage="getCurrentPage"
      @getPageSize="getPageSize"
    />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerAddDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="addEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训开始时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empStaTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="培训结束时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empEndTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            type="textarea"
            v-model="addEmployeeName.remarks1"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog
      :title="title"
      :visible.sync="centerEditDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="editEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训开始时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empStaTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="培训结束时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empEndTime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks1"
            rows="5"
            cols="35"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data from "../json/dataTable.json";
export default {
  name: "EmployeeDimissionList",
  mounted() {
    // 页面一加载就获取所有员工的信息
    // this.tableData = this.employee.slice(0, this.pageSize);
    this.selectPagination();
  },
  data() {
    return {
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 4,
      currentPage: 1,
      header: {
        empId: "序号",
        empJob: "岗位",
        empName: "姓名",
        empSex: "性别",
        empStaTime: "培训开始时间",
        empEndTime: "培训结束时间",
        remarks1: "备注",
      },
      adddialog: {
        empId: "序号",
        empJob: "岗位",
        empName: "姓名",
        empSex: "性别",
        // empStaTime: "培训开始时间",
        // empEndTime: "培训结束时间",
        // remarks1: "备注",
      },
      addEmployeeName: {
        empId: "",
        empJob: "",
        empName: "",
        empSex: "",
        empStaTime: "",
        empEndTime: "",
        remarks1: "",
      },
      editEmployeeName: {
        empId: "",
        empJob: "",
        empName: "",
        empSex: "",
        empStaTime: "",
        empEndTime: "",
        remarks1: "",
      },
      title: "添加培训员工的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
      startTimeInput: "开始日期",
      endTimeInput: "结束日期",
      startTime: "",
      endTime: "",
    };
  },
  methods: {
    // 分页查询请求数据
    selectPagination() {
      this.$api.employeeTraining
        .getEmployeeTraining(this.currentPage, this.pageSize)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let data = res.data.data;
            console.log(data.list);
            this.tableData = data.list.map((item) => {
              item.empCreateTime = item.empCreateTime.slice(0, 10);
              item.empEndTime = item.empEndTime.slice(0, 10);
              item.empUpdateTime = item.empUpdateTime.slice(0, 10);
              item.empStaTime = item.empStaTime.slice(0, 10);
              return item;
            });
            this.total = data.total;
          }
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.centerEditDialogVisible = true;
      this.editEmployeeName = data;
      console.log(this.editEmployeeName);
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 添加该名员工的信息，发生Ajax请求
    addEmployee() {
      this.centerAddDialogVisible = false;
    },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      this.centerEditDialogVisible = false;
    },
    // 接收子组件传递过来的数据
    updateTableData(tableData) {
      this.tableData = tableData;
    },
    selectEmployee() {},
  },
};
</script>

<style scoped lang="less">
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      flex: 10%;
    }
  }
}
.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.el-dialog {
  transform: translate(-50%, 50%);
  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;
    .el-form-item {
      flex: 50%;
    }
  }
}
.text {
  display: flex;
  flex-wrap: wrap;
  div {
    flex: 50%;
    span {
      display: inline-block;
      width: 100px;
      text-align: right;
      color: #606266;
    }
    textarea {
      vertical-align: middle;
      border: 1px solid #dcdfe6;
      outline: none;
    }
  }
}
</style>
